<template>
  <div style="width: 100%;height: 100%; display: flex">
    <div style="width: 300px; height: 100%; flex-shrink: 0">
      <div class="page-title">
        List 功能验证<el-button @click="testne()" class="mt-btn"
          >重载</el-button
        >
      </div>

      <div class="page-title">表格区域功能验证功能验证：</div>
      <div class="page-flex">
        <label>模型编码：</label>
        <ekInput v-model="fromtest.modelCode" />
      </div>
      <div class="page-flex">
        <label>列表接口：</label>
        <ekInput v-model="fromtest.configs.listUrl" />
      </div>
      <div class="page-flex">
        <label>尺寸：</label>
        <ekRadio
          v-model="fromtest.size"
          :options="[
            {
              value: 'default',
              label: '默认',
            },
            {
              value: 'small',
              label: '小',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>开启分页：</label>
        <ekRadio
          v-model="fromtest.configs.pageOn"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>开启搜索：</label>
        <ekRadio
          v-model="fromtest.configs.searchOn"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>开启操作区域：</label>
        <ekRadio
          v-model="fromtest.configs.operateOn"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>开启左边树：</label>
        <ekRadio
          v-model="fromtest.configs.treeOn"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>开启表格树属性：</label>
        <ekRadio
          v-model="fromtest.configs.treePropsOn"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-title">搜索区域功能验证：</div>
      <div class="page-flex">
        <el-button @click="testData(1)" class="mt-btn">input</el-button>
        <el-button @click="testData(2)" class="mt-btn">下拉</el-button>
        <el-button @click="testData(3)" class="mt-btn">时间</el-button>
        <el-button @click="testData(4)" class="mt-btn">清空</el-button>
      </div>
      <div class="page-flex">
        <label>暴露刷新方法</label>
        <el-button @click="refresh()" class="mt-btn">刷新</el-button>
      </div>
      <div class="page-title">分页区域功能验证：</div>
      <div class="page-flex">
        <label>每页数量</label>
        <el-input-number v-model="fromtest.pages.pageSize" />
      </div>
       <div class="page-flex">
        <label>排序验证：</label>
        <el-button @click="testData6(1)" class="mt-btn">切换</el-button>
        <el-button @click="testData6(2)" class="mt-btn">默认</el-button>
      </div>
      <div class="page-title">操作区域功能验证：</div>
      <div class="page-flex">
        <el-button @click="testData2(1)" class="mt-btn">添加</el-button>
        <el-button @click="testData2(2)" class="mt-btn">清空</el-button>
      </div>
      <div class="page-title">字段功能验证：</div>
      <div class="page-flex">
        <el-button @click="testData3(1)" class="mt-btn">添加</el-button>
        <el-button @click="testData3(2)" class="mt-btn">添加操作列</el-button>
        <el-button @click="testData3(3)" class="mt-btn">清空</el-button>
      </div>
      <div class="page-title">左边树验证：</div>
      <div class="page-flex">
         <label>模型编码：</label>
         <ekInput v-model="fromtest.trees.modelCode" />
      </div>
       <div class="page-flex">
        <label>树接口：</label>
        <ekInput v-model="fromtest.trees.url" />
      </div>
       <div class="page-flex">
        <label>切换字段映射：</label>
        <el-button @click="testData4(1)" class="mt-btn">切换</el-button>
        <el-button @click="testData4(2)" class="mt-btn">默认</el-button>
      </div>
       <div class="page-flex">
        <label>切换查询字段映射：</label>
        <el-button @click="testData5(1)" class="mt-btn">切换</el-button>
        <el-button @click="testData5(2)" class="mt-btn">默认</el-button>
      </div>
    </div>
    <div style="width: calc(100% - 300px);height: 100%">
      <ekList
        :layoutData="layoutData"
        ref="refList"
        v-if="show"
        :size="fromtest.size"
        @size-change="sizeChange"
      ></ekList>
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  ref,
  computed,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ekList from "@/components/business/ekList/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import { extractFunctionBody } from "@/utils/common"
//todo  添加默认查询条件
// todo 由于权限导致操作栏宽度问题，以及没有任何按钮权限时候操作类隐藏实现
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekMessage } = globalProperties;
const store = useStore();

let fromtest = ref({
  size:'default',
  modelCode: "MODEL_DEMO",
  configs: {
    listUrl: `/admin/basis/getList?modelCode=MODEL_DEMO`,
    pageOn: true,
    searchOn: true,
    operateOn: true, //开启操作区域
    treeOn: true, // 开启左边树
    treePropsOn: false, // 开启表格树形属性
    reserveSelection: true
  },
  searchs: [
    {
      type: "Input",
      column: "manage_account",
      label: "管理员账户",
    },
    {
      type: "Select",
      column: "manage_state",
      label: "状态",
      autoInit: false,
      url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    },
    {
      type: "DatePicker",
      column: "ctime",
      label: "创建日期",
    },
  ],
  pages: {
    pageSize: 20,
    orders: [
      {
        field: "id",
        sort: "desc",
      },
    ],
  },
  buttons: [
    {
      type: "add",
      text: "新增",
      config: {
        // 标题
        // title: "新增",
        // 新增成功后是否自动刷新
        autoReload: true,
        // 打开模型编码
        modelCode: "MODEL_DEMO",
        // 表单配置接口，没有配置走标准接口
        formUrl: ``,
        // 表单新增接口，没有配置走标准接口
        addUrl: ``,
        // 表单保存接口，没有配置走标准接口
        saveUrl: ``,
        // 回调
        callback: ' console.log("add回调了", row, rows); done();',
        // callback: ({row, rows, done}) => {
        //   console.log("add回调了", row, rows);
        //   done();
        // },
      },
    },
    {
      type: "delete",
      icon: "",
      text: "删除",
      config: {
        // 打开模型编码
        modelCode: "MODEL_DEMO",
        // 表单配置接口，没有配置走标准接口
        deleteUrl: ``,
        // 回调
        callback: ({row, rows, button, done}) => {
          console.log("delete回调了", row, rows);
          done();
        },
      },
    },
    {
      type: "import",
      icon: "",
      text: "导入",
    },
    {
      type: "export",
      icon: "",
      text: "导出",
      config: {
        // 打开模型编码
        modelCode: "MODEL_DEMO",
        // 表单配置接口，没有配置走标准接口
        exportUrl: ``,
        // 回调
        callback: () => {
          console.log("export回调了");
        },
      },
    },
    // 自定义js
    {
      type: "customJs",
      icon: "",
      text: "自定义js",
      config: {
        // 回调
        callback:  ({row, rows, button, done}) => {
          console.log("customJs回调了", refList.value.getSelectionRows());
          // 执行自定义js 操作
          $ekMessage.success("执行了自定义js");
        },
      },
    },
    // 自定义组件
    {
      type: "customComponents",
      icon: "",
      text: "自定义组件",
      config: {
        // 标题
        title: "自定义组件",
        // 组件
        component: "demo/components/MyAdd",
        autoReload: true,
        autoClose: true,
        // 回调
        callback:  ({row, rows, button, done}) => {
          console.log("custom回调了",row, rows);
          done();
        },
      },
      
    },
      {
      type: "customJs",
      text: "启用",
      config: {
      callback: ({ row, rows, button, done }) => {
          console.log( button, "customJs回调了");
          if(rows.length == 0){
            $ekMessage.warning("请选择数据");
            return;
          }
          let ids = rows.map((item) => item.id);
          button.loading = true;
          $http
          .post(
            `/admin/demo/state`,
            {ids:ids,state:1}
          )
          .then((res) => {
            refList.value.refresh();
            $ekMessage.success(res.message)
          })
          .finally(() => {button.loading = false;});
        },
      },
    },
    {
      type: "customJs",
      text: "禁用",
      config: {
      callback: ({ row, rows, button, done }) => {
          console.log( button, "customJs回调了");
          if(rows.length == 0){
            $ekMessage.warning("请选择数据");
            return;
          }
          let ids = rows.map((item) => item.id);
          button.loading = true;
          $http
          .post(
            `/admin/demo/state`,
            {ids:ids,state:0}
          )
          .then((res) => {
            refList.value.refresh();
            $ekMessage.success(res.message)
          })
          .finally(() => {button.loading = false;});
        },
      },
    },
  ],
  columns: [
    { type: "selection" },
    {
      label: "管理员ID",
      column: "id",
      sortable: "custom",
      display: "detail",
      config: {
        // 打开模型编码
        modelCode: "MODEL_DEMO",
        // 表单配置接口，没有配置走标准接口
        detailUrl: ``,
      },
    },
    {
      label: "管理员账户",
      column: "manage_account",
      sortable: "custom",
      display: "text",
    },
    {
      label: "创建时间",
      column: "ctime",
      format: "datetime",
      display: "text",
    },
    {
      label: "状态",
      column: "manage_state_dim_text",
      display: "state",
      config: {
        backgroundColor: ({ row }) => {
          if (row.manage_state == 1) {             
            return '#67c23a';            
          } else if (row.manage_state == 0) {              
            return '#f56c6c'
          }
        }
      }
    },
    {
      label: "操作",
      column: "operate",
      width: "220",
      fixed: "right",
      buttons: [
        {
          type: "detail",
          icon: "",
          text: "详情",
          config: {
            // 标题
            title: "详情1",
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            formUrl: ``,
            // 表单新增接口，没有配置走标准接口
            saveUrl: ``,
            // 表单详情接口，没有配置走标准接口
            detailUrl: ``,
          },
        },
        {
          type: "edit",
          icon: "",
          text: "编辑",
          config: {
            // 标题
            title: "编辑1",
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            formUrl: ``,
            // 表单新增接口，没有配置走标准接口
            saveUrl: ``,
            // 表单详情接口，没有配置走标准接口
            detailUrl: ``,
            // 回调
            callback: ({row, rows, button, done}) => {
              console.log("edit回调了",row, rows);
              done();
            },
          },
        },
        {
          type: "delete",
          icon: "",
          text: "删除",
          config: {
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            deleteUrl: ``,
            // 回调
            callback: ({row, rows, button, done}) => {
              console.log("delete回调了",row, rows);
              done();
            },
          },
        },
      ],
    },
  ],
  trees: {
      modelCode: "MODEL_DEPARTMENT",
      url: `/admin/basis/getTree?modelCode=MODEL_DEPARTMENT`,
      // 映射后端字段, 接口返回数据和标准格式映射取值，此处转换是前端把数组转换成树，是否做后端树接口兼容处理todo
      fieldMapping: {
        label: "department_name",
        id: "id",
        parentId: "parent_id",
      },
      // 左侧数据映射到列表查询条件
      searchMapping: [
        {
          bracket: "(",
          type: "bracket",
        },
        {
          // 来源字段
          sourceField: "id",
          // 目标字段
          targetField: "department_id",
          // 符号
          symbol: "eq",
        },
        {
          bracket: ")",
          type: "bracket",
        },
      ],
      // 树组件一些配置项todo
      config: {},
    },
});

const testData = (type) => {
  if (type == 1) {
    fromtest.value.searchs.push({
      type: "Input",
      column: "manage_account",
      label: "管理员账户",
    });
  } else if (type == 2) {
    fromtest.value.searchs.push({
      type: "Select",
      column: "manage_state",
      label: "状态",
      autoInit: false,
      url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    });
  } else if (type == 3) {
    fromtest.value.searchs.push({
      type: "DatePicker",
      column: "ctime",
      label: "创建日期",
    });
  } else {
    fromtest.value.searchs = [];
  }
};
const testData2 = (type) => {
  if (type == 1) {
    fromtest.value.buttons = [
      {
        type: "add",
        text: "新增",
        config: {
          // 标题
          title: "",
          // 新增成功后是否自动刷新
          autoReload: true,
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          formUrl: ``,
          // 表单新增接口，没有配置走标准接口
          addUrl: ``,
          // 表单保存接口，没有配置走标准接口
          saveUrl: ``,
          // 回调
          callback: () => {
            console.log("add回调了");
          },
        },
      },
      {
        type: "delete",
        icon: "",
        text: "删除",
        config: {
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          deleteUrl: ``,
          // 回调
          callback: () => {
            console.log("delete回调了");
          },
        },
      },
      {
        type: "import",
        icon: "",
        text: "导入",
      },
      {
        type: "export",
        icon: "",
        text: "导出",
        config: {
          // 打开模型编码
          modelCode: "MODEL_DEMO",
          // 表单配置接口，没有配置走标准接口
          exportUrl: ``,
          // 回调
          callback: () => {
            console.log("export回调了");
          },
        },
      },
      // 自定义js
      {
        type: "customJs",
        icon: "",
        text: "自定义js",
        config: {
          // 回调
          callback: () => {
            console.log("customJs回调了", refList.value.getSelectionRows());
            // 执行自定义js 操作
            $ekMessage.success("执行了自定义js");
          },
        },
      },
      // 自定义组件
      {
        type: "customComponents",
        icon: "",
        text: "自定义组件",
        config: {
          // 标题
          title: "自定义组件",
          // 组件
          component: "demo/components/MyAdd",

          // 回调
          callback: () => {
            console.log("custom回调了");
          },
        },
      },
    ];
  } else if (type == 2) {
    fromtest.value.buttons = [];
  }
};
const testData3 = (type) => {
  if (type == 1) {
    fromtest.value.columns = [
        { type: "selection" },
    {
      label: "管理员ID",
      column: "id",
      sortable: "custom",
      display: "detail",
      config: {
        // 打开模型编码
        modelCode: "MODEL_DEMO",
        // 表单配置接口，没有配置走标准接口
        detailUrl: ``,
      },
    },
    {
      label: "管理员账户",
      column: "manage_account",
      sortable: "custom",
      display: "text",
    },
    ];
   } else if (type == 2) {
    fromtest.value.columns.push({
      label: "操作",
      column: "operate",
      width: "220",
      fixed: "right",
      buttons: [
        {
          type: "detail",
          icon: "",
          text: "详情",
          config: {
            // 标题
            title: "",
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            formUrl: ``,
            // 表单新增接口，没有配置走标准接口
            saveUrl: ``,
            // 表单详情接口，没有配置走标准接口
            detailUrl: ``,
          },
        },
        {
          type: "edit",
          icon: "",
          text: "编辑",
          config: {
            // 标题
            title: "",
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            formUrl: ``,
            // 表单新增接口，没有配置走标准接口
            saveUrl: ``,
            // 表单详情接口，没有配置走标准接口
            detailUrl: ``,
            // 回调
            callback: () => {
              console.log("edit回调了");
            },
          },
        },
        {
          type: "delete",
          icon: "",
          text: "删除",
          config: {
            // 打开模型编码
            modelCode: "MODEL_DEMO",
            // 表单配置接口，没有配置走标准接口
            deleteUrl: ``,
            // 回调
            callback: () => {
              console.log("delete回调了");
            },
          },
        },
      ],
    });
  
  } else if (type == 3) {
    fromtest.value.columns = [];
  }
};
const testData4 = (type) => {
  if (type == 1) {
    fromtest.value.trees.fieldMapping =  {
        label: "department_path",
        id: "id",
        parentId: "parent_id",
    };
   } else if (type == 2) {
  
    fromtest.value.trees.fieldMapping =  {
        label: "department_name",
        id: "id",
        parentId: "parent_id",
    };
  }
};
const testData5 = (type) => {
  if (type == 1) {
    fromtest.value.trees.searchMapping =  [
        {
          // 来源字段
          sourceField: "department_name",
          // 目标字段
          targetField: "manage_account",
          // 符号
          symbol: "like",
        }
      ]
   } else if (type == 2) {
  
    fromtest.value.trees.searchMapping =  [
        {
          bracket: "(",
          type: "bracket",
        },
        {
          // 来源字段
          sourceField: "id",
          // 目标字段
          targetField: "department_id",
          // 符号
          symbol: "eq",
        },
        {
          bracket: ")",
          type: "bracket",
        },
      ]
  }
};
const testData6 = (type) => {
  if (type == 1) {
    fromtest.value.pages.orders =  [
      {
        field: "id",
        sort: "desc",
      },
      {
        field: "ctime",
        sort: "asc",
      },
    ]
   } else if (type == 2) {
  
   fromtest.value.pages.orders =  [
      {
        field: "id",
        sort: "desc",
      },
    ]
  }
};
const refresh = () => {
  refList.value.refresh();
};
const sizeChange = (event) => {
  fromtest.value.pages.pageSize = event;
};
let refList = ref(null);

const layoutData = computed(() => {
  return {
    modelCode: fromtest.value.modelCode,
    configs: {
      listUrl: fromtest.value.configs.listUrl,
      pageOn: fromtest.value.configs.pageOn, // 开启分页
      searchOn: fromtest.value.configs.searchOn, // 开启搜索
      operateOn: fromtest.value.configs.operateOn, //开启操作区域
      treeOn: fromtest.value.configs.treeOn, // 开启左边树
      treePropsOn: fromtest.value.configs.treePropsOn, // 开启表格树形属性
      reserveSelection:fromtest.value.configs.reserveSelection, // 开启树形属性treePropsOn，reserveSelection值配置无效
    },

    // 查询条件
    searchs: fromtest.value.searchs,
    // 分页配置
    pages: fromtest.value.pages,
    // 按钮配置
    buttons: fromtest.value.buttons,
    // 显示字段
    columns:fromtest.value.columns,
    // 左边树
    trees:fromtest.value.trees,
  };
});


let  json = JSON.parse(JSON.stringify(fromtest.value, (key, value) => {
  if (typeof value === 'function') {
    return extractFunctionBody(value);
  }
  return value;
}))
console.log(json,'jsonjson')

const show = ref(true);
const testne = () => {
  show.value = false;
  setTimeout(() => {
    show.value = true;
  }, 1000);
};
// TODO
/**
 * 字段在多功能列表上显示配置，加上字段类型type
 * (1)默认text,文本显示不支持操作
 * (2)input，支持单个值修改
 * (3)switch,开关
 * (4)detail,打开另外一个详情
 *（5） 暴露查询方法
 */

/**
 * 自定义操作按钮可以是打开一个新组件
 * 也可以是一个业务逻辑
 */
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
.page-flex {
  display: flex;
  align-items: center;
}
</style>
